<template>
  <!-- 作业组件 -->
  <!-- 组件类型: 122 -->
  <div class="vy-cmp-work">
    <div class="vy-cmp-work-container">
      <div class="vy-cmp-work-form">
        <div class="work-setting-panel">
          <a-row>
            <template v-for="(work, index) in formData.contentList">
              <!-- 1-图文 5-视频 6-语音 4-文档 -->
              <template v-if="work.type == '1'">
                <vy-cmp-work-content-editor
                  :key="index"
                  :index="index"
                  :title="fmt_view_content_title(index, work.type)"
                  :source="work"
                  @del_work_content="click_del_work_content"
                ></vy-cmp-work-content-editor>
              </template>
              <template v-if="work.type == '5'">
                <vy-cmp-work-content-video
                  :key="index"
                  :index="index"
                  :title="fmt_view_content_title(index, work.type)"
                  :source="work"
                  @del_work_content="click_del_work_content"
                ></vy-cmp-work-content-video>
              </template>
              <template v-if="work.type == '6'">
                <vy-cmp-work-content-audio
                  :key="index"
                  :index="index"
                  :title="fmt_view_content_title(index, work.type)"
                  :source="work"
                  @del_work_content="click_del_work_content"
                ></vy-cmp-work-content-audio>
              </template>
              <template v-if="work.type == '4'">
                <vy-cmp-work-content-doc
                  :key="index"
                  :index="index"
                  :title="fmt_view_content_title(index, work.type)"
                  :source="work"
                  @del_work_content="click_del_work_content"
                ></vy-cmp-work-content-doc>
              </template>
            </template>
            <div class="vy-plus-panel">
              <template v-if="plusEnableClick">
                <div
                  class="vy-plus-btn"
                  @click="() => (optionShow = !optionShow)"
                >
                  <img
                    src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                    style="width:40px;"
                  />
                </div>
              </template>
              <template v-else>
                <div class="vy-plus-btn" style="cursor: unset;">
                  <img
                    src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                    style="width:40px;cursor: unset;"
                  />
                </div>
              </template>
            </div>
            <div class="vy-plus-wrapper">
              <div class="vy-plus-options" v-show="optionShow">
                <div class="vy-plus-options-panel">
                  <!-- <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('2')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FpU24D4AlI3axkc-Ws13CY_QJZtP"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">图片</div>
                  </div> -->
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('1')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fsp01ui0Fph_KGnGLx38lFuQMNL7"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">图文</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('5')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FvmMjbGcsH34JbTlcAitfk3KgFn1"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">视频</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('6')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FqIz9mRtYmLslpNIOka-8Re83VTp"
                        style="width:15px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">语音</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('4')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fh2CQq2OSjjJhcuBOwvbJR4cRRM5"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">文档</div>
                  </div>
                  <!-- <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('6')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fg86jSy8s0UcO03KtjbdDv2SwdJ1"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">H5</div>
                  </div> -->
                </div>
              </div>
            </div>
          </a-row>
        </div>
        <a-form>
          <a-form-item v-if="formData.questions.length">
            <template v-for="(work, index) in formData.questions">
              <!-- 1-单选 2-多选 3-判断 4-问答 5-打分 6-填空 7-分类 9-不定项选择 -->
              <template v-if="work.type == '1'">
                <vy-cmp-work-single
                  :key="index"
                  :index="index"
                  :title="fmt_view_title(index, work.type)"
                  :source="work"
                  @del_estimate="click_del_work"
                ></vy-cmp-work-single>
              </template>
              <template v-if="work.type == '2'">
                <vy-cmp-work-multi
                  :key="index"
                  :index="index"
                  :title="fmt_view_title(index, work.type)"
                  :source="work"
                  @del_estimate="click_del_work"
                ></vy-cmp-work-multi>
              </template>
              <template v-if="work.type == '3'">
                <vy-cmp-work-tandf
                  :key="index"
                  :index="index"
                  :title="fmt_view_title(index, work.type)"
                  :source="work"
                  @del_estimate="click_del_work"
                ></vy-cmp-work-tandf>
              </template>
              <template v-if="work.type == '4'">
                <vy-cmp-work-qanda
                  :key="index"
                  :index="index"
                  :title="fmt_view_title(index, work.type)"
                  :source="work"
                  @del_work="click_del_work"
                ></vy-cmp-work-qanda>
              </template>
              <template v-if="work.type == '6'">
                <vy-cmp-work-tiankong
                  :key="index"
                  :index="index"
                  :title="fmt_view_title(index, work.type)"
                  :source="work"
                  @del_exam="click_del_work"
                ></vy-cmp-work-tiankong>
              </template>
              <template v-if="work.type == '7'">
                <vy-cmp-group
                  :key="index"
                  :index="index"
                  :title="fmt_group_title(index)"
                  :source="work"
                  @del_group="click_del_group"
                >
                </vy-cmp-group>
              </template>
            </template>
          </a-form-item>
          <a-form-item>
            <div class="vy-plus-panel">
              <template v-if="plusEnableClick">
                <div
                  class="vy-plus-btn"
                  @click="() => (optionShow = !optionShow)"
                >
                  <img
                    src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                    style="width:40px;"
                  />
                </div>
              </template>
              <template v-else>
                <div class="vy-plus-btn" style="cursor: unset;">
                  <img
                    src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                    style="width:40px;cursor: unset;"
                  />
                </div>
              </template>
            </div>
            <div class="vy-plus-wrapper">
              <div class="vy-plus-options" v-show="optionShow">
                <div class="vy-plus-options-panel">
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work('1')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FjSFrQjKd1s6BjovaddlO5CpM1FT"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">单选题</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work('2')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FvV_1Re3m42dacpCseZFxy_zeGVw"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">多选题</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work('3')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fjk_-QuCrZyqnQLLsOU07AKuDKnq"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">判断题</div>
                  </div>
                  <!-- <div
                    class="vy-plus-options-item"
                    @click="click_add_work('4')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FstddXikh74L-X5TbPcJckNTMK76"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">不定向选择</div>
                  </div> -->
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work('4')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fgb61vQnpwftLA8Y4kRm_Jj5_LPX"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">问答题</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    @click="click_add_work('6')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FtEjpkXAWEs5rIBAl3sdJguoN_Nn"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">填空题</div>
                  </div>
                  <div
                    class="vy-plus-options-item"
                    v-show="isGroup"
                    @click="click_add_group('7')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FvqQb4U2IKI25vsfcIia_MaQxTtH"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">分类</div>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>
          <a-form-item class="vy-form-footer">
            <a-button
              type="primary"
              :disabled="!formData.questions.length"
              @click="click_save_info"
              >保存更改</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
// 作业类型关系
const work_TYPE = {
  "1": "单选题",
  "2": "多选题",
  "3": "判断题",
  "4": "问答题",
  "6": "填空题",
  "7": "分类",
};

// 作业内容类型关系 1-图文  5-视频 6-语音 4-文档
const work_content_TYPE = {
  "2": "图片",
  "1": "图文",
  "5": "视频",
  "6": "语音",
  "4": "文档",
  // "6": "H5",
};

// 作业面板实体对象
const work_FIELD = {
  id: +new Date(), // 题目Id
  title: "", // 题目
  correctAnswer: null, // 正确答案
  analysis: null, // 解析
  options: [], // 选项集合
};

const work_content_FIELD = {
  id: +new Date() + 1000, // 资源Id
  fileName: "", // 文件名
  savePath: "", // 保存地址
  content: "", // 富文本内容
  type: 1, // 1-图文  5-视频 6-语音 4-文档
};

import WorkSingle from "./work/single.vue"; // 单选题
import WorkMulti from "./work/multi.vue"; // 多选题
import WorkTAndF from "./work/tandf.vue"; // 判断题
import WorkQAndA from "./work/qanda.vue"; // 问答题
import WorkTianKong from "./work/tiankong.vue"; // 填空题
import WorkEditor from "./work/editor.vue"; // 图文
import WorkAudio from "./work/audio.vue"; // 音频
import WorkVideo from "./work/video.vue"; // 视频
import WorkWord from "./work/doc.vue"; // 文档
import Group from "./group/group.vue"; //分类

const CMP_TYPE = 122; // 组件类型
export default {
  name: "vy-cmp-work",
  data() {
    return {
      plusEnableClick: false, // 添加按钮可以点击
      optionShow: true, // 添加选项是否显示
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        questions: [],
        workGroupQuestions: [],
        contentList: [],
        resources: [],
      },
    };
  },
  watch: {
    "formData.workGroupQuestions": {
      handler: function(newVal, oldVal) {
        if (newVal.length > 0) {
          let data = [];
          newVal.forEach((item) => {
            data.push({
              type: "7",
              workGroupId: item.workGroupId,
              name: item.workGroupName,
            });
            const childData = JSON.parse(JSON.stringify(item));
            childData.workQuestions.forEach((childItem) => {
              data.push({
                type: childItem.type,
                questionId: childItem.questionId,
                title: childItem.title,
                options: childItem.options || [],
              });
            });
          });
          this.formData.questions = data;
        }
      },
      deep: true,
    },
    "formData.resources": {
      handler: function(newVal, oldVal) {
        let resultList = [];
        this.formData.contentList = [];
        newVal.forEach((item) => {
          let result = {};
          Object.assign(result, work_content_FIELD, item);
          resultList.push(result);
        });

        this.formData.contentList = resultList;
      },
      deep: true,
    },
  },
  mounted() {
    const params = {
      moduleType: CMP_TYPE,
      projectId: this.projectId,
      moduleId: this.getModuleId(), // 主题Id
      id: this.formData.id || "",
    };
    this.$axios.get("/subassembly/getModuleRule", { params }).then((res) => {
      if (res.success) {
        this.$emit("work-rule-value", res.subassemblyVo.showContent);
      }
    });
  },
  components: {
    [WorkQAndA.name]: WorkQAndA,
    [WorkSingle.name]: WorkSingle,
    [WorkMulti.name]: WorkMulti,
    [WorkTAndF.name]: WorkTAndF,
    [WorkTianKong.name]: WorkTianKong,
    [WorkEditor.name]: WorkEditor,
    [WorkAudio.name]: WorkAudio,
    [WorkVideo.name]: WorkVideo,
    [WorkWord.name]: WorkWord,
    [Group.name]: Group,
  },
  computed: {
    isGroup() {
      if (
        this.formData.questions.length > 0 &&
        this.formData.questions[0].type !== "7"
      ) {
        return false;
      } else return true;
    },
  },
  methods: {
    // 格式化添加的子组件标题
    fmt_view_title(index, type) {
      let groupIndex = 0;
      const data = this.formData.questions;
      if (data[0].type !== "7") {
        return `问题${index + 1}【${work_TYPE[type]}】`;
      } else {
        for (let j = index - 1; j > -1; j--) {
          if (this.formData.questions[j].type === "7") {
            groupIndex = j;
            break;
          }
        }
        return `问题${index - groupIndex}【${work_TYPE[type]}】`;
      }
    },
    fmt_view_content_title(index, type) {
      return work_content_TYPE[type];
    },
    fmt_group_title(index) {
      let groupCount = 0;
      for (let j = 0; j < index; j++) {
        if (this.formData.questions[j].type === "7") {
          groupCount += 1;
        }
      }
      return `分类${groupCount + 1}`;
    },
    // 添加作业-实现方法
    add_work(type) {
      let _work = JSON.parse(JSON.stringify(work_FIELD));
      Object.assign(_work, {
        type: type, // 题目类型
        questionId: "",
      });
      this.formData.questions.push(_work);
    },
    add_work_content(type) {
      let _work = JSON.parse(JSON.stringify(work_content_FIELD));
      Object.assign(_work, {
        type: type, // 内容类型
      });
      this.formData.contentList.push(_work);
    },
    add_group(type) {
      this.formData.questions.push({
        type: type,
        name: "",
        workGroupId: "",
      });
    },
    click_add_group(type) {
      this.add_group(type);
    },
    // 点击添加作业
    click_add_work(type) {
      this.add_work(type);
    },
    click_add_work_content(type) {
      this.add_work_content(type);
    },
    click_del_work_content(index) {
      this.formData.contentList.splice(index, 1);
    },
    // 删除当前作业
    click_del_work(index) {
      this.formData.questions.splice(index, 1);
    },
    click_del_group(index) {
      const data = this.formData.questions;
      let deleteCount = 0;
      for (let j = index + 1; j < data.length; j++) {
        if (data[j].type === "7") {
          break;
        }
        deleteCount += 1;
      }

      this.formData.questions.splice(index, deleteCount + 1);
    },
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    // 创建/更新内容组件
    saveInfo() {
      let submitData = {
        resources: this.formData.contentList,
        questions: this.formData.questions,
      };
      if (this.formData.questions[0].type !== "7") {
        submitData.haveGroup = 0;
      } else {
        submitData = [];
        let fillData = false;
        let group = {};
        this.formData.questions.forEach((item) => {
          if (item.type === "7") {
            if (group.workGroupName) {
              submitData.push(JSON.parse(JSON.stringify(group)));
            }
            group = {
              workGroupId: item.workGroupId,
              workGroupName: item.name,
              workQuestions: [],
            };
          } else {
            group.workQuestions.push({
              questionId: item.questionId,
              title: item.title,
              type: item.type,
              options: item.options,
            });
          }
        });

        if (group.workGroupName) {
          submitData.push(JSON.parse(JSON.stringify(group)));
        }

        submitData = {
          workGroupQuestions: submitData,
          resources: this.formData.contentList,
          haveGroup: 1,
        };
      }

      let params = Object.assign({}, this.formData, submitData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId(), // 主题Id
      });
      this.$axios.post("/subassembly/save", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-work {
  width: 100%;
  height: 100%;
  background: #ffffff;
  input.ant-input {
    border: none;
    border-bottom: 1px solid #d9d9d9;
    border-radius: 0;
    + .ant-input-group-addon {
      border: none;
      border-bottom: 1px solid #d9d9d9;
      border-radius: 0;
      background-color: transparent;
    }
  }
  .vy-cmp-work-container {
    .vy-cmp-work-form {
      .work-setting-panel {
        padding-bottom: 30px;
        .ant-row {
          padding: 5px 0px;
        }
        .ck-editor__editable {
          height: 230px;
        }

        .vy-sign,
        .vy-title {
          display: inline-block;
          vertical-align: middle;
        }
        .vy-sign {
          background: #3366ff;
          border-radius: 1px;
          font-weight: 400;
          color: #3366ff;
          margin-right: 15px;
          width: 5px;
          height: 20px;
        }
      }
      // 作业内容填写展示区域
      .vy-cmp-work-item {
        border: 1px dashed #e8e7e7;
        margin-bottom: 10px;
      }

      .vy-cmp-work-content-item {
        margin-bottom: 25px;
        .ant-btn-link {
          color: #444040;
        }
      }
      // 作业类型区域添加
      .vy-plus-panel {
        position: relative;
        &::before {
          content: " ";
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 1px;
          border-top: 3px solid #eef4ff;
        }
        .vy-plus-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ffffff;
          padding: 0 20px;
          z-index: 10;
          cursor: pointer; // 若是可点击显示隐藏添加作业类型选项，可设置该值
          .anticon-plus {
            padding: 5px;
            background: #494949;
            border-radius: 50%;
            color: #ffffff;
          }
        }
      }
      .vy-plus-wrapper {
        position: relative;
        // border: 1px solid red;
        width: fit-content;
        margin: 0 auto;
        .vy-plus-options {
          margin: 0 auto;
          padding-top: 32px;
          position: relative;
          &::before {
            position: absolute;
            content: " ";
            border: 10px solid #eef4ff;
            border-color: #fff #fff #eef4ff #fff;
            top: 12px;
            left: calc(50% - 10px);
          }
          .vy-plus-options-panel {
            display: flex;
            padding: 0 20px;
            border-radius: 8px;
            color: #3366ff;
            background: #eef4ff;
            box-shadow: 0px 2px 8px 0px rgba(181, 200, 255, 0.63);
            justify-content: space-between;
            align-items: center;
            .vy-plus-options-item {
              line-height: initial;
              position: relative;
              text-align: center;
              cursor: pointer;
              padding: 10px 15px;
              .vy-plus-options-item-desc {
                padding-top: 6px;
                font-size: 14px;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
  .vy-form-footer {
    margin-top: 50px;
    text-align: center;
    margin-bottom: 0;
    .ant-btn {
      padding: 0 100px;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
        &[disabled] {
          background: #f5f5f5;
          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
